<template>

  <div class=container style="margin:10px 0;padding:0 10px">
    <el-card>
      <Form @table="on"></Form>
      <el-alert
    :title="`数据一共  ${count}条`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>
     <el-table
     :data="list"
      style="width: 100%">
      <el-table-column
        label="试题编号"
        prop="number"
        width="180"/>

      <el-table-column
        label="学科"
        prop="subject"
        width="180"/>

      <el-table-column
        label="目录"
        prop="catalog"
        width="180"/>

      <el-table-column
        label="题型"
        prop="questionType"
        width="180"/>

         <el-table-column
        label="题干"
        width="180"
        prop="question"
        >
        <template #default="{row}" >
          <div v-html="row.question"></div>
        </template>
        </el-table-column>

        <el-table-column
        label="录入时间"
        prop="addDate"
        width="180"/>

        <el-table-column
        label="难度"
        prop="difficulty"
        width="180"/>

        <el-table-column
        label="录入人"
        prop="creator"
        width="180"/>

        <el-table-column label="操作" width="220">
         <template #default="{row,$index}">
          <el-button icon="el-icon-view" type="primary" circle @click="loadDetail(row)" ></el-button>
          <el-button icon="el-icon-edit" type="success" circle @click="updata(row)" style="margin-left: 10px;"></el-button>
          <el-button icon="el-icon-delete" type="danger" circle @click="delQuestion(row)" style="margin-left: 10px;"></el-button>
          <el-button icon="el-icon-check" type="warning" circle @click="addChoice(row,$index)" style="margin-left: 10px;"></el-button>
         </template>
        </el-table-column>
    </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="tableList.page"
      :page-sizes="[5, 10, 20, 50]"
      background
      :page-size="tableList.pagesize"
      layout="prev, pager, next, sizes,jumper"
      :total="count"
      style="float:right;margin:20px 0">
    </el-pagination>
    </el-card>
    <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="47%"
  @close="isClose"
  >
<detailDiglog
  :Detail="Detail"
  ref="close"
  :closeDialog="closeDialog"
  />
</el-dialog>
  </div>
</template>

<script>

// 导入弹层组件
import detailDiglog from '.././components/questions-preview.vue'
// 获取题型/难度的枚举属性
import { questionType, difficulty } from '@/api/hmmm/constants.js'
// 导入组件
import Form from '../components/topForm.vue'
// 导入获取基础题库列表接口
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 枚举难度的方法
function getDifficult (aa) {
  const type = difficulty.find((item) => item.value === aa)
  return type ? type.label : '未知难度'
}
// 枚举的方法
function getType (aa) {
  const type = questionType.find((item) => item.value === aa)
  return type ? type.label : '未知题型'
}
export default {
  components: { Form, detailDiglog },
  data () {
    return {
      // 获取基础题库试题列表默认值
      tableList: {
        page: 1, // 当前页
        pagesize: 5// 每页多少条数据
      },
      list: [], // 存放试题数据
      count: 0, // 总共多少条数据
      // 传给子组件的数据
      Detail: {},
      dialogVisible: false // 控制弹层显示与关闭
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    // 点击加入精选题库
    addChoice (row, $index) {
      console.log(row)
      row.choiceState = 1
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const res = await choiceAdd(row)
        console.log(res, '添加精选列表成功')
        // 从基础题库中删除这个数据
        this.list.splice($index, 1)
        this.$message.success('添加精选列表成功')
        this.loadList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击删除
    delQuestion (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        this.$message.success('删除成功')
        this.loadList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击修改
    updata (row) {
      this.$router.push(`new?id=${row.id}`)
    },
    // 关闭视频
    isClose () {
      this.$refs.close.close()
    },
    // 关闭弹层
    closeDialog () {
      this.dialogVisible = false
    },
    // 点击预览按钮显示弹层
    async loadDetail (row) {
      console.log(row)
      // console.log(row, 'row')
      // // 打开弹层
      this.dialogVisible = true
      const { data } = await detail(row)
      console.log(data, 'res')
      // // 给弹层准备数据
      this.Detail = data
      // console.log(this.Detail, 'Detail')
      // // 获取题目类型的枚举数据
      this.Detail.questionType = getType(+this.Detail.questionType)
      // console.log(this.Detail.questionType, 'this.Detail.questionType')
      // // 获取题目难度的枚举数据
      this.Detail.difficulty = getDifficult(+this.Detail.difficulty)
    },
    // 获取基础题库列表
    async loadList () {
      const { data } = await list(this.tableList)
      console.log(data, '基础题库列表')
      // 存放获取的列表数据
      // data.items.addDate = data.data.
      this.list = data.items
      this.count = data.counts
      // 枚举难度
      this.list.forEach(item => {
        // console.log(item, 'difficulty')
        item.difficulty = getDifficult(+item.difficulty)
        item.questionType = getType(+item.questionType)
        item.addDate = item.addDate.substring(0, 10) + ' ' + item.addDate.substring(11, 19)
      })
    },
    handleSizeChange (val) {
      // 点击切换一页多少条数据
      this.tableList.pagesize = val
      this.loadList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // 点击跳转到第几页
      this.tableList.page = val
      this.loadList()
      console.log(`当前页: ${val}`)
    },
    async on (val) {
      // this.pages.subjectID = val.subjectID
      if (val.subjectID === '') {
        delete val.subjectID
      }
      this.tableList = { ...this.tableList, ...val }
      console.log(this.tableList)
      if (this.tableList.page !== 1) this.tableList.page = 1
      const { data } = await list({ ...val, ...this.tableList })
      this.count = data.counts
      this.list = data.items
      this.list.forEach(item => {
        // console.log(item, 'difficulty')
        item.difficulty = getDifficult(+item.difficulty)
        item.questionType = getType(+item.questionType)
      })
    }
  }
}

</script>

<style scoped lang='less'>
::v-deep  .cell .el-button--warning{

    width: 32px;
    height: 32px;
    margin: 0;
    text-align: center;
    padding: 8px;
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
      &:hover{
      background: #e6a23c;
      border-color: #e6a23c;
        .el-icon-edit{
          color: #fff;
    }
  }
}
::v-deep .cell .el-button--success{
    margin-left: 10px;
    width: 32px;
    height: 32px;
    margin: 0;
    text-align: center;
    // line-height: 1;
    padding: 8px;
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
    &:hover{
      background: #67c23a;
      border-color: #67c23a;
      .el-icon-edit{
            color: #fff;
    }
  }
}
::v-deep .cell .el-button--primary{
    width: 32px;
    height: 32px;
    margin: 0;
    text-align: center;
    // line-height: 1;
    padding: 8px;
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
      &:hover{
       background: #409eff;
       border-color: #409eff;
        .el-icon-view{
          color: #fff;
    }
  }
}
::v-deep .cell .el-button--danger{
    margin-left: 10px;
    width: 32px;
    height: 32px;
    margin: 0;
    text-align: center;
    // line-height: 1;
    padding: 8px;
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
      &:hover{
      background: #f56c6c;
      border-color: #f56c6c;
      .el-icon-delete{
         color: #fff;
    }
  }
}
</style>
